<!DOCTYPE html>
<html lang="en" xmlns="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="../css/mystore.css">
    <title>Mypetstore</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="../js/productAuto.js"></script>
</head>
<body>
<div class="container" th:fragment="header">
    <!-- 导航栏 -->
    <nav class="main-nav">
        <a href="/catalog/index"><img src="../images/logo.png" alt="MyPetstore" class="logo"></a>
        <ul id="QuickLinks" class="main-menu">
            <li><a href="/catalog/viewCategory?categoryId=FISH">Fish</a></li>
            <li><a href="/catalog/viewCategory?categoryId=DOGS">Dogs</a></li>
            <li><a href="/catalog/viewCategory?categoryId=REPTILES">Reptiles</a></li>
            <li><a href="/catalog/viewCategory?categoryId=CATS">Cats</a></li>
            <li><a href="/catalog/viewCategory?categoryId=BIRDS">Birds</a></li>
        </ul>
        <ul class="right-menu">
            <div id="MenuContent" class="right-menu">

            <a th:if="${session.loginAccount} == null" href="/account/signonform">Sign In</a>
            <li><a th:if="(${session.loginAccount} != null) " href="/account/signout">Sign Out</a></li>
            <li><a th:if="(${session.loginAccount} != null) " href="/account/myaccount">My Account</a></li>

            <li><a href="../help.html">Help</a></li>
            </div>

            <li>
                <div id="Search">
                    <div id="SearchContent">
                <form action="/catalog/searchProducts" method="post">
                    <!-- 搜索框可能出问题 -->
                    <input type="text" class="search-input"  name="keyword" id="keyword" placeholder="Product search"/>
                    <button type="submit" class="search-btn">
                        <i class="fas fa-search"></i>
                    </button>
                </form>
                <div id="productAutoComplete"  style="margin-left: -45px;">
                    <ul id="productAutoList">

                    </ul>
                </div>
                    </div>
                </div>
            </li>
            <li>
                <a href="/cart">
                    <i class="fas fa-shopping-cart"></i>
                </a>
            </li>
        </ul>
    </nav>
    <div id="Content">



